<template>
  <base-modal
    class="material-sn-dialog-container"
    :show.sync="visible"
    :title="title"
    width="500px"
  >
    <div class="material-sn-content">

      <div class="bottom">
        <el-input type="textarea" v-model="isSnValue" :rows="8" :disabled="snValueDisabled"></el-input>
        <div v-if="type === 'readOnly'" class="tips">{{$t('common.form.tip.materialReturn.tips3')}}</div>
        <div v-if="type === 'edit' || type === 'add' " class="tips">{{$t('common.form.tip.materialReturn.tips4')}}</div>
      </div>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button :disabled="pending" @click="visible = false">{{$t('common.base.cancel')}}</el-button>
      <el-button v-if="type === 'add' || type === 'edit'" type="primary" :disabled="pending" @click="submit">{{$t('common.base.submit')}}</el-button>
    </div>
  </base-modal>
</template>
<script>
/* api */
import * as WareHouseApi from '@src/api/WareHouseApi';
import i18n from '@src/locales';
export default {
  name: 'material-sn-dialog',
  props: {
    value: {
      type: Array,
      default: () => []
    },
    data: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      pending: false,
      visible: false,
      loading: false,
      snData: [],
      form: {
        snValue: ''
      },
      rules: {
        snValue: { required: true, message: i18n.t('common.placeholder.selectSomething', {0:'SN'}), trigger: 'change' }
      },
      type: '',
      title: '',
      titleMap: {
        'add': i18n.t('common.base.addModule', {module:'SN'}),
        'edit': i18n.t('common.base.editModule', {module:'SN'}),
        'readOnly': i18n.t('common.base.viewModule', {module:'SN'})
      },
      snTextList: [],
      materialAmount: 0,
      isSnValue: '',
      row: {},
      index: ''
    }
  },
  computed: {
    snValue: {
      get(){
        return this.snTextList.join('\n')
      },
      set(v) {
        this.snTextList = v ? v.split('\n') : []
      }
    },
    snValueDisabled() {
      return this.type === 'readOnly'
    }
  },
  methods: {
    open(type, row, index) {
      this.title = this.titleMap[type]
      this.type = type
      this.row = row
      this.index = index
      this.snData = []
      this.isSnValue = row.snList.join('\n')
      this.visible = true
    },
    /**
     * @description 搜索SN
    */
    async search(keyword) {
      this.loading = true;
      try {
        let params = {
          keyword
        }
        let res = await WareHouseApi.getInventorySNList(params);
        this.loading = false;
        if (!res.success) return;
        this.snData = res.data.snList.map(item => {
          return {
            label: item,
            value: item,
            ...item,
          }
        })
      } catch (error) {
        this.loading = false;
        console.log('search -> error', error);
      }
    },
    /**
     * @description 选择SN
    */
    chooseSn(value) {
      let haveSn = this.snTextList.findIndex(item => item === value) > -1
      if(haveSn) return this.$platform.toast(this.$t('common.form.tip.materialReturn.tips5'), 'warning')
      
      if(this.snTextList.length >= this.materialAmount) return this.$platform.toast(this.$t('common.form.tip.materialReturn.tips6'), 'warning')
      this.snTextList.push(value)
    },
    submit() {
      let snList = this.isSnValue.split('\n')
      if(snList.length !== this.row.number) return this.$platform.toast(this.$t('common.form.tip.materialReturn.tips7'), 'warning')
      let data = this.data
      this.$set(data[this.index], 'snList', snList)

      this.$emit('changeSn', data)
      this.visible = false
    }
  }
}
</script>
<style lang="scss" scope>
.material-sn-content {
  padding: 10px;
  .bottom {
    padding: 0 4px;
    .tips {
      padding: 10px 0;
      font-size: 12px;
      color: #606266;
    }
  }
  
}
.el-textarea.is-disabled .el-textarea__inner {
  color: #606266 !important;
  background-color: #FFFFFF !important;
}
</style>